$(function () {


  // 定义一个全局变量
  // var a = null
  // 测试链接
  // console.log('aaa');
  function previewImg(url) {
    //弹出层
    layer.open({
      type: 5,
      shade: 0.6,
      area: ['auto', 'auto'],
      offset: 'auto',
      shadeClose: true,
      scrollbar: true,
      title: false, //不显示标题
      content: `<img style="width:auto" src="${url}"/>`, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
      cancel: function () {
        //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
      }
    });
  }


  var url = null
  $('tbody').on('click', '#view', function () {
    // console.log($(this).children('img').prop('src'));

    url = $(this).children('img').prop('src');
    previewImg(url)
  })
  getSwiperList()
  // getSwiperPut ()
  // 请求获取数据请求
  function getSwiperList() {
    $.ajax({
      method: 'get',
      url: '/admin/swipers',
      success: function (res) {
        // console.log(res.data);
        if (res.status !== 0) {
          return false
        }
        // 调用模板引擎
        var htmlStr = template('tp1', res)
        // a = res.data.swiperstatus
        // console.log(a);
        //   console.log(htmlStr);
        $('tbody').html(htmlStr)
        // 一定要记得调用 form.render() 方法
        layui.form.render()
      }
    })
  }
  // 删除轮播图片
  // 通过代理的形式，为删除按钮绑定点击事件处理函数
  $('tbody').on('click', '.delete', function () {
    //   console.log(111);
    // 获取删除按钮的个数
    var len = $('.delete').length
    // console.log(len)
    // 获取到文章的 id
    var id = $(this).attr('data-id')
    // console.log(id);
    // 询问用户是否要删除数据
    layer.confirm('确认删除?', {
      icon: 3,
      title: '提示'
    }, function (index) {
      $.ajax({
        method: 'DELETE',
        url: '/admin/swipers/' + id,
        success: function (res) {
          if (res.status !== 0) {
            return layer.msg('删除失败！', {
              icon: 5
            })
          }
          layer.msg('删除成功！', {
            icon: 6
          }, () => {
            location.reload()
          })
          // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
          // 如果没有剩余的数据了,则让页码值 -1 之后,
          // 再重新调用 getSwiperList() 方法
          // 4
          // if (len === 1) {
          //   // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
          //   // 页码值最小必须是 1
          //   q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
          // }

        }
      })

      layer.close(index)
    })
  })
  // 批量上传模块
  $('#uploadSwiper').on('click', function () {
    $('#myfile').click()
  })
  // 监听 myfile 的 change 事件，获取用户选择的文件列表
  // change事件表示为一旦变化就怎么怎么样
  var fd = new FormData();
  $('#myfile').on('change', function (e) {
    var files = $('#myfile')[0].files
    for (var i = 0; i < files.length; i++) {
      fd.append('swipers', files[i])
      // console.log(files);
      // console.log(fd);
    }
    $.ajax({
      type: 'post',
      url: '/admin/swipers',
      data: fd,
      // swipers,
      contentType: false,
      processData: false,
      success: function (res) {
        if (res.status !== 0) {
          return layui.layer.msg('上传轮播图失败', {
            icon: 5
          })
          //   console.log(res.status);
          // console.log(swipers);
        }
        layui.layer.msg(res.message, {
          icon: 6
        }, () => {
          location.reload()
        })

      }
    })

  })

  // 轮播图修改请求数据
  // 事件委托
  $('tbody').on('click', 'span', function () {
    // 测试点击事件
    // console.log(111);
    // 获取id
    var id = $(this).parent().siblings('.lzd').html()
    // 打印id
    // 根据id号获取当前id的状态

    // 如果为启用状态点击按钮则变为禁用状态，反之禁用状态点击变为启用状态
    // 提交数据，上传到后台
    // 渲染页面

    var status = $(this).attr('data-status') - 0
    console.log(status);
    status = status === 1 ? 2 : 1
    $.ajax({
      method: 'put',
      url: '/admin/swipers/' + id,
      data: {
        status
      },
      success: function (res) {
        console.log(res.status);
        // console.log(res.data.swiperstatus);
        if (res.status === 1) {
          return layer.msg(res, message, {
            icon: 5
          })
        } else if (res.status === 0) {
          layer.msg(res.message, {
            icon: 6
          })
          getSwiperList()
        }

      }
    })
  })
  // 全选按钮点击事件
  $('.checkall').change(function () {
    // console.log(666);
    // console.log($(this).prop("checked"));
    $('.j-checkbox, .checkall').prop('checked', $(this).prop("checked"))
  })
  // 小复选框change事件
  $('tbody').on('change', '.j-checkbox', function () {
    // console.log(11);
    if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
      $(".checkall").prop("checked", true);
    } else {
      $(".checkall").prop("checked", false);
    }


  })
  // 全部删除按钮添加点击事件
  $('#all-delete').on('click', function () {
    // 点击全部删除按钮以后，让小复选框为true状态的全部删除
    var arr = []
    // console.log('1');
    $.ajax({
      method: 'get',
      url: '/admin/swipers',
      success: function (res) {
        console.log(res.data);
        if (res.status === 0) {
          $.each(res.data, function (index, value) {
            arr.push(res.data[index].id)
            console.log(arr);
          })
          $.each(arr, function (index, item) {
            $.ajax({
              method: 'DELETE',
              url: '/admin/swipers/' + item,
              success: function (res) {
                if (res.status !== 0) {
                  return layer.msg('删除失败！', {
                    icon: 5
                  })
                }
                layer.msg('删除成功！', {
                  icon: 6
                }, function () {
                  // 页面重绘的意思
                  location.reload()
                })
                // 当数据删除完成后，需要判断当前这一页中，是否还有剩余的数据
                // 如果没有剩余的数据了,则让页码值 -1 之后,
                // 再重新调用 getSwiperList() 方法
                // 4
                // if (len === 1) {
                //   // 如果 len 的值等于1，证明删除完毕之后，页面上就没有任何数据了
                //   // 页码值最小必须是 1
                //   q.pagenum = q.pagenum === 1 ? 1 : q.pagenum - 1
                // }     
              }
            })
          })
        }
      }
    })
  })
  $('tbody').on('change', '.j-checkbox', function () {
    console.log($('.j-checkbox:checked').parent().siblings('.lzd').html());
    // var check = $('.j-checkbox:checked').toArray()
    // console.log(check);
    // $.each(res.data, function (index, value) {
    //   arr.push(res.data[index].id)
    //   console.log(arr);
    // })
  })

  // 部分选中按钮点击删除事件
  $('#xz-delete').on('click', function () {
    // 获取所有的选中带有id的元素 返回的是个伪数组
    var data = $('.j-checkbox:checked').parent().siblings('.lzd')
    console.log(data);
    var newArr = []
    // 遍历这个伪数组 把里面对应的id取到 存放到新数组中
    $.each(data, function (index, value) {
      // 存到新数组 转成int
      newArr.push(data[index].innerHTML * 1)
      console.log(newArr);


    })
    // 遍历存放id的数组 根据里面的id进行删除操作
    $.each(newArr, function (index, item) {
      $.ajax({
        method: 'DELETE',
        url: '/admin/swipers/' + item,
        success: function (res) {
          if (res.status !== 0) {
            return layer.msg('删除失败！', {
              icon: 5
            })
          }
          layer.msg('删除成功！', {
            icon: 6
          }, function () {
            // 页面重绘的意思
            location.reload()
          })

        }
      })
    })

  })
})